
import { useState, useRef,createElement } from "react"
import { compressPictures, onlyValue, nullFn,createElementFn} from "@monorepo/utils"
import { bigImgAlert } from "@/components/comm/FuiouImage/index.jsx"
import "./FuiouUpload.scss"

//图片组件
function AddFuiouUpload({src,id,onClick}){
    function delFn(event){
        event.stopPropagation(); // 阻止事件冒泡
        onClick(id);
    }
    //显示大图
    function showBigImgFn(){
        bigImgAlert(src)
    }
    return (
        <div className="fuiou_upload flex align-items justify-content-center" onClick={showBigImgFn}>
            <img src={src} />
            <label className="del" onClick={delFn}>删除</label>
        </div>
    )
}
export  function FuiouUpload(){
    const [ imgList,setImgList]=useState([]),uploadRef=useRef()
    function uploadSuccessFn(file){
        compressPictures((res)=>{
            setImgList((list)=>{
               return list.concat({
                    src:URL.createObjectURL(res),
                    id:onlyValue()
                })
            })
         },file,true)
    }

    function changeFn(event){
        const [file]=event.target.files,{type}=file
        uploadSuccessFn(file)
    }
    //删除图片
    function delFn(id){
        setImgList((list)=>{
            return list.filter(item=>item.id!=id)
        })
    }
    //点击上传
    function uploadFn(event){
        if(event.target.tagName=='DIV'){
            const el=event.currentTarget
            el.querySelector("input").click()
        }
    }   
    //这里是拖拽的效果
    function dragoverFn(event){
        event.preventDefault();
    }
    //
    function dropFn(event){
        event.preventDefault(); // 阻止默认行为（否则不会触发 drop 事件）
        const files = event.dataTransfer.files;
        if (files.length > 0) {
            for(let file of files){
                uploadSuccessFn(file)
            }
        }
    };
    return (
       <div className="flex wrap">
            <div className="fuiou_upload" ref={uploadRef} onClick={uploadFn} onDragOver={dragoverFn} onDrop={dropFn}>
                <div className="upload"></div>
                <input type="file" onChange={(event)=>changeFn(event)} />
            </div>
            { imgList.map(item=>{
                return <AddFuiouUpload {...item} key={item.id} onClick={delFn}></AddFuiouUpload>
            })}
            
       </div>
    )
}

export  function FuiouImageUpload(){
    const [ imgList,setImgList]=useState([]),uploadRef=useRef()
    function uploadSuccessFn(file){
        compressPictures((res)=>{
           
         },file,true)
    }

    function changeFn(event){
        const [file]=event.target.files,{type}=file
        uploadSuccessFn(file)
    }
    //删除图片
    function delFn(){
      
    }
    //点击上传
    function uploadFn(event){
        if(event.target.tagName=='DIV'){
            const el=event.currentTarget
            el.querySelector("input").click()
        }
    }   
    //这里是拖拽的效果
    function dragoverFn(event){
        event.preventDefault();
    }
    //
    function dropFn(event){
        event.preventDefault(); // 阻止默认行为（否则不会触发 drop 事件）
        const files = event.dataTransfer.files;
        if (files.length > 0) {
            for(let file of files){
                uploadSuccessFn(file)
            }
        }
    };
    return (
       <div className="flex wrap">
            <div className="fuiou_upload" ref={uploadRef} onClick={uploadFn} onDragOver={dragoverFn} onDrop={dropFn}>
                <div className="upload"></div>
                <input type="file" onChange={(event)=>changeFn(event)} />
            </div>
            <AddFuiouUpload {...item} key={item.id} onClick={delFn}></AddFuiouUpload>
       </div>
    )

}